<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#box {
				width: 100px;
				height: 100px;
				background-color: red;
				position: absolute;
			}
		</style>
		<script type="text/javascript">
			window.onload = function() {
				var box = document.getElementById('box');
				
				box.onmousedown = function(){
					var x = event.clientX - box.offsetLeft;
					var y = event.clientY - box.offsetTop;
					
					document.onmousemove = function(event){
						event = event || window.event;
						var left = event.clientX - x;
						var top = event.clientY - y;
						
						box.style.left = left + 'px';
						box.style.top = top +'px';
					};
					
					box.onmouseup = function(){
						document.onmousemove = null;
						box.onmouseup = null;
					}
				}
			}
		</script>
	</head>
	<body style="height: 10000px;">
		<div id="box"></div>
	</body>
</html>
